{"componentChunkName":"component---node-modules-gatsby-theme-mdx-deck-src-templates-deck-js","path":"/intro-to-js","matchPath":"/intro-to-js/*","result":{"data":{"deck":{"id":"fe525724-c99d-5bf4-ae06-77d8ea6eed86","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar theme = vsDark;\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Appear = makeShortcode(\"Appear\");\nvar layoutProps = {\n  theme: theme,\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Intro to JS \\uD83D\\uDC4B\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.linkedin.com/in/ragavkumarv/\"\n  }, \"@ragavkumarv\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Types of declarations\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Types of declarations\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var, let & const\\n\")), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, github, shadesOfPurple],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"var\\\"\",\n    \"title\": \"\\\"var\\\"\"\n  }, \"var name = \\\"Yeswanth\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"let\\\"\",\n    \"title\": \"\\\"let\\\"\"\n  }, \"let name = \\\"Yeswanth\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"const\\\"\",\n    \"title\": \"\\\"const\\\"\"\n  }, \"const name = \\\"Yeswanth\\\";\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"var\\\"\",\n    \"title\": \"\\\"var\\\"\"\n  }, \"var name = \\\"Yeswanth\\\";\\nvar name = \\\"Abhay\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"let\\\"\",\n    \"title\": \"\\\"let\\\"\"\n  }, \"let name = \\\"Yeswanth\\\";\\nlet name = \\\"Abhay\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"const\\\"\",\n    \"title\": \"\\\"const\\\"\"\n  }, \"const name = \\\"Yeswanth\\\";\\nconst name = \\\"Abhay\\\";\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"var\\\" subtitle=\\\"✔️Redeclare\\\"\",\n    \"title\": \"\\\"var\\\"\",\n    \"subtitle\": \"\\\"✔️Redeclare\\\"\"\n  }, \"var name = \\\"Yeswanth\\\";\\nvar name = \\\"Abhay\\\"; // \\u2714\\uFE0F\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"let\\\" subtitle=\\\"❌Redeclare\\\"\",\n    \"title\": \"\\\"let\\\"\",\n    \"subtitle\": \"\\\"❌Redeclare\\\"\"\n  }, \"let name = \\\"Yeswanth\\\";\\nlet name = \\\"Abhay\\\"; // \\u274C\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"const\\\" subtitle=\\\"❌Redeclare\\\"\",\n    \"title\": \"\\\"const\\\"\",\n    \"subtitle\": \"\\\"❌Redeclare\\\"\"\n  }, \"const name = \\\"Yeswanth\\\";\\nconst name = \\\"Abhay\\\"; // \\u274C\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"var\\\"\",\n    \"title\": \"\\\"var\\\"\"\n  }, \"var name = \\\"Yeswanth\\\";\\nname = \\\"Abhay\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"let\\\"\",\n    \"title\": \"\\\"let\\\"\"\n  }, \"let name = \\\"Yeswanth\\\";\\nname = \\\"Abhay\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"const\\\"\",\n    \"title\": \"\\\"const\\\"\"\n  }, \"const name = \\\"Yeswanth\\\";\\nname = \\\"Abhay\\\";\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"var\\\" subtitle=\\\"✔️Reassign\\\"\",\n    \"title\": \"\\\"var\\\"\",\n    \"subtitle\": \"\\\"✔️Reassign\\\"\"\n  }, \"var name = \\\"Yeswanth\\\";\\nname = \\\"Abhay\\\"; // \\u2714\\uFE0F\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"let\\\" subtitle=\\\"✔️Reassign\\\"\",\n    \"title\": \"\\\"let\\\"\",\n    \"subtitle\": \"\\\"✔️Reassign\\\"\"\n  }, \"let name = \\\"Yeswanth\\\";\\nname = \\\"Abhay\\\"; // \\u2714\\uFE0F\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"const\\\" subtitle=\\\"❌Reassign\\\"\",\n    \"title\": \"\\\"const\\\"\",\n    \"subtitle\": \"\\\"❌Reassign\\\"\"\n  }, \"const name = \\\"Yeswanth\\\";\\nname = \\\"Abhay\\\"; // \\u274C\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"var\\\"\",\n    \"title\": \"\\\"var\\\"\"\n  }, \"\\u2714\\uFE0F Reassign\\n\\u2714\\uFE0F Redeclare\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"let\\\"\",\n    \"title\": \"\\\"let\\\"\"\n  }, \"\\u2714\\uFE0F Reassign\\n\\u274C Redeclare\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"const\\\"\",\n    \"title\": \"\\\"const\\\"\"\n  }, \"\\u274C Reassign\\n\\u274C Redeclare\\n\")))), mdx(\"hr\", null), mdx(\"h2\", null, \"Scope\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Scope\"), mdx(\"p\", null, \"Lifetime of variable \"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, github, shadesOfPurple],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"{\\n  let quote = `Live more worry less \\uD83E\\uDD29`;\\n  var niceQuote = \\\"Be good Do good  \\uD83C\\uDF89\\uD83C\\uDF89\\\";\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"function beautiful() {\\n  let quote = `Live more worry less \\uD83E\\uDD29`;\\n  var niceQuote = \\\"Be good Do good  \\uD83C\\uDF89\\uD83C\\uDF89\\\";\\n}\\nbeautiful();\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"{\\n  let quote = `Live more worry less \\uD83E\\uDD29`;\\n  var niceQuote = \\\"Be good Do good  \\uD83C\\uDF89\\uD83C\\uDF89\\\";\\n}\\n\\nconsole.log(quote);\\nconsole.log(niceQuote);\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"function beautiful() {\\n  let quote = `Live more worry less \\uD83E\\uDD29`;\\n  var niceQuote = \\\"Be good Do good  \\uD83C\\uDF89\\uD83C\\uDF89\\\";\\n}\\nbeautiful();\\n\\nconsole.log(quote);\\nconsole.log(niceQuote);\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Block scope\\\"\",\n    \"title\": \"\\\"Block\",\n    \"scope\\\"\": true\n  }, \"{\\n  let quote = `Live more worry less \\uD83E\\uDD29`;\\n  var niceQuote = \\\"Be good Do good  \\uD83C\\uDF89\\uD83C\\uDF89\\\";\\n}\\n\\nconsole.log(quote); // \\u274C Error\\nconsole.log(niceQuote); // \\u2714\\uFE0F\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Function scope\\\"\",\n    \"title\": \"\\\"Function\",\n    \"scope\\\"\": true\n  }, \"function beautiful() {\\n  let quote = `Live more worry less \\uD83E\\uDD29`;\\n  var niceQuote = \\\"Be good Do good  \\uD83C\\uDF89\\uD83C\\uDF89\\\";\\n}\\nbeautiful();\\n\\nconsole.log(quote); // \\u274C Error\\nconsole.log(niceQuote); // \\u274C Error\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Block scope\\\"\",\n    \"title\": \"\\\"Block\",\n    \"scope\\\"\": true\n  }, \"{\\n} // creates block scope\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Function scope\\\"\",\n    \"title\": \"\\\"Function\",\n    \"scope\\\"\": true\n  }, \"function beautiful() { ... } // creates function scope\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Block scope\\\"\",\n    \"title\": \"\\\"Block\",\n    \"scope\\\"\": true\n  }, \"{ } // creates block scope\\nlet & const\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Function scope\\\"\",\n    \"title\": \"\\\"Function\",\n    \"scope\\\"\": true\n  }, \"function beautiful() { ... } // creates function scope\\nvar\\n\")))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"What's the output 🤔❓\\\"\",\n    \"title\": \"\\\"What's\",\n    \"the\": true,\n    \"output\": true,\n    \"🤔❓\\\"\": true\n  }, \"function drivingTest(age) {\\n  if (age > 18) {\\n    let msg = \\\"eligible\\\";\\n  } else {\\n    let msg = \\\"not eligible\\\";\\n  }\\n\\n  console.log(\\\"\\uD83D\\uDC82\\uD83C\\uDFFD\\u200D\\u2640\\uFE0F are \\\" + msg);\\n}\\n\\ndrivingTest(20);\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"What's the output 🤔❓\\\"  subtitle=\\\"❌ Error msg is not defined\\\"\",\n    \"title\": \"\\\"What's\",\n    \"the\": true,\n    \"output\": true,\n    \"🤔❓\\\"\": true,\n    \"\": true,\n    \"subtitle\": \"\\\"❌\",\n    \"Error\": true,\n    \"msg\": true,\n    \"is\": true,\n    \"not\": true,\n    \"defined\\\"\": true\n  }, \"function drivingTest(age) {\\n  if (age > 18) {\\n    let msg = \\\"eligible\\\";\\n  } else {\\n    let msg = \\\"not eligible\\\";\\n  }\\n\\n  console.log(\\\"\\uD83D\\uDC82\\uD83C\\uDFFD\\u200D\\u2640\\uFE0F are \\\" + msg); // \\u274C Error\\n}\\n\\ndrivingTest(20);\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"How to solve 🤔❓\\\" subtitle=\\\"❌ Error msg is not defined\\\"\",\n    \"title\": \"\\\"How\",\n    \"to\": true,\n    \"solve\": true,\n    \"🤔❓\\\"\": true,\n    \"subtitle\": \"\\\"❌\",\n    \"Error\": true,\n    \"msg\": true,\n    \"is\": true,\n    \"not\": true,\n    \"defined\\\"\": true\n  }, \"function drivingTest(age) {\\n  if (age > 18) {\\n    let msg = \\\"eligible\\\";\\n  } else {\\n    let msg = \\\"not eligible\\\";\\n  }\\n\\n  console.log(\\\"\\uD83D\\uDC82\\uD83C\\uDFFD\\u200D\\u2640\\uFE0F are \\\" + msg); // \\uD83E\\uDD29\\n}\\n\\ndrivingTest(20);\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"How to solve 🤔❓\\\" subtitle=\\\"✔️ Works since function scope\\\"\",\n    \"title\": \"\\\"How\",\n    \"to\": true,\n    \"solve\": true,\n    \"🤔❓\\\"\": true,\n    \"subtitle\": \"\\\"✔️\",\n    \"Works\": true,\n    \"since\": true,\n    \"function\": true,\n    \"scope\\\"\": true\n  }, \"function drivingTest(age) {\\n  if (age > 18) {\\n    var msg = \\\"eligible\\\";\\n  } else {\\n    var msg = \\\"not eligible\\\";\\n  }\\n\\n  console.log(\\\"\\uD83D\\uDC82\\uD83C\\uDFFD\\u200D\\u2640\\uFE0F are \\\" + msg); // \\uD83E\\uDD29\\n}\\n\\ndrivingTest(20);\\n\")))), mdx(\"hr\", null), mdx(\"h2\", null, \"TypeCasting / Coercion\"), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 + x2);\\nconsole.log(x1 - x2);\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 + x2);\\n// 3 -> \\\"3\\\"\\n// \\\"5\\\"\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 + x2);\\n// 3 -> \\\"3\\\"\\n// \\\"5\\\"\\n// \\\"3\\\" + \\\"5\\\"  -> \\\"35\\\"\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 - x2);\\n// 3\\n// \\\"5\\\" -> 5\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 - x2);\\n// 3\\n// \\\"5\\\" -> 5\\n// 3 - 5 -> -2\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Implicit Coercion\\\"\",\n    \"title\": \"\\\"Implicit\",\n    \"Coercion\\\"\": true\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 + x2);\\nconsole.log(x1 - x2);\\n\"))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Explicit Coercion\\\"\",\n    \"title\": \"\\\"Explicit\",\n    \"Coercion\\\"\": true\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Explicit Coercion\\\"\",\n    \"title\": \"\\\"Explicit\",\n    \"Coercion\\\"\": true\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 + parseInt(x2));\\nconsole.log(x1 + +x2);\\n\"))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, github],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Implicit Coercion\\\"\",\n    \"title\": \"\\\"Implicit\",\n    \"Coercion\\\"\": true\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 + x2);\\nconsole.log(x1 - x2);\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Explicit Coercion\\\"\",\n    \"title\": \"\\\"Explicit\",\n    \"Coercion\\\"\": true\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Implicit Coercion\\\"\",\n    \"title\": \"\\\"Implicit\",\n    \"Coercion\\\"\": true\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 + x2);\\nconsole.log(x1 - x2);\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Explicit Coercion\\\"\",\n    \"title\": \"\\\"Explicit\",\n    \"Coercion\\\"\": true\n  }, \"var x1 = 3;\\nvar x2 = \\\"5\\\";\\nconsole.log(x1 + parseInt(x2));\\nconsole.log(x1 + +x2);\\n\")))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var g1 = 5;\\nvar g2 = \\\"5\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Which is faster? Why?\\\"\",\n    \"title\": \"\\\"Which\",\n    \"is\": true,\n    \"faster?\": true,\n    \"Why?\\\"\": true\n  }, \"var g1 = 5;\\nvar g2 = \\\"5\\\";\\nconsole.log(g1 == g2);\\nconsole.log(g1 === g2);\\n\"))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, github],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"==\\\"\",\n    \"title\": \"\\\"\"\n  }, \"1. Checks for the value\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"===\\\"\",\n    \"title\": \"\\\"\"\n  }, \"1. Checks for the value\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"==\\\"\",\n    \"title\": \"\\\"\"\n  }, \"1. Checks for the value\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"===\\\"\",\n    \"title\": \"\\\"\"\n  }, \"1. Checks for the value\\n2. Checks for the data type\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"==\\\" subtitle=\\\"❌ == is faster\\\"\",\n    \"title\": \"\\\"\",\n    \"subtitle\": \"\\\"❌\",\n    \"\": \"\",\n    \"is\": true,\n    \"faster\\\"\": true\n  }, \"1. Checks for the value\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"===\\\"\",\n    \"title\": \"\\\"\"\n  }, \"1. Checks for the value\\n2. Checks for the data type\\n\")))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"==\\\" subtitle=\\\"Allows Coercion/Typecasting\\\"\",\n    \"title\": \"\\\"\",\n    \"subtitle\": \"\\\"Allows\",\n    \"Coercion/Typecasting\\\"\": true\n  }, \"5 == \\\"5\\\";\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"==\\\" subtitle=\\\"Allows Coercion/Typecasting\\\"\",\n    \"title\": \"\\\"\",\n    \"subtitle\": \"\\\"Allows\",\n    \"Coercion/Typecasting\\\"\": true\n  }, \"5 == \\\"5\\\";\\n\\\"5\\\" -> 5\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"==\\\" subtitle=\\\"Allows Coercion/Typecasting\\\"\",\n    \"title\": \"\\\"\",\n    \"subtitle\": \"\\\"Allows\",\n    \"Coercion/Typecasting\\\"\": true\n  }, \"5 == \\\"5\\\";\\n\\\"5\\\" -> 5\\n5 == 5; // then compares the value\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"===\\\" subtitle=\\\"Doesnt allow Coercion/Typecasting\\\"\",\n    \"title\": \"\\\"\",\n    \"subtitle\": \"\\\"Doesnt\",\n    \"allow\": true,\n    \"Coercion/Typecasting\\\"\": true\n  }, \"5 === \\\"5\\\"; // checks directly\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"===\\\"\",\n    \"title\": \"\\\"\"\n  }, \"\\\"===\\\" is faster since only one step\\n\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"Types of functions\"), mdx(\"hr\", null), mdx(\"h3\", null, \"Types of functions\"), mdx(\"ul\", null, mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"li\", null, \"Normal function\"), mdx(\"li\", null, \"Arrow function\"), mdx(\"li\", null, \"Anonymous function\"), mdx(\"li\", null, \"IIFE (Pattern)\"))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Normal function\\\"\",\n    \"title\": \"\\\"Normal\",\n    \"function\\\"\": true\n  }, \"function double(n) {\\n  return n * 2;\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Arrow function\\\"\",\n    \"title\": \"\\\"Arrow\",\n    \"function\\\"\": true\n  }, \"const double = (n) => {\\n  return n * 2;\\n};\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Arrow function\\\"\",\n    \"title\": \"\\\"Arrow\",\n    \"function\\\"\": true\n  }, \"const double = (n) => n * 2;\\n\"))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, github],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Normal function\\\"\",\n    \"title\": \"\\\"Normal\",\n    \"function\\\"\": true\n  }, \"function double(n) {\\n  return n * 2;\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Arrow function\\\"\",\n    \"title\": \"\\\"Arrow\",\n    \"function\\\"\": true\n  }, \"const double = (n) => n * 2;\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Normal function\\\"\",\n    \"title\": \"\\\"Normal\",\n    \"function\\\"\": true\n  }, \"function sum(a, b) {\\n  return a + b;\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Arrow function\\\"\",\n    \"title\": \"\\\"Arrow\",\n    \"function\\\"\": true\n  }, \"const sum = (a, b) => a + b;\\n\")))), mdx(\"hr\", null), mdx(\"h2\", null, \"IIFE\"), mdx(\"hr\", null), mdx(\"h2\", null, \"IIFE\"), mdx(\"span\", {\n    style: {\n      \"color\": \"white\",\n      \"fontFamily\": \"Roboto\"\n    }\n  }, \"Immediately Invoked Function expression\"), mdx(\"hr\", null), mdx(\"h2\", null, \"IIFE\"), mdx(\"ul\", null, mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"li\", null, \"Library authors\"), mdx(\"li\", null, \"To contain scope\"), mdx(\"li\", null, \"No clash between variable names (namespaces)\"))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"IIFE\\\"\",\n    \"title\": \"\\\"IIFE\\\"\"\n  }, \"function double(n) {\\n  console.log(n * 2);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"file=./src/iife.0.js 3[2:5] title=\\\"IIFE\\\" subtitle=\\\"❌ Error\\\"\",\n    \"file\": \"./src/iife.0.js\",\n    \"3[2:5]\": true,\n    \"title\": \"\\\"IIFE\\\"\",\n    \"subtitle\": \"\\\"❌\",\n    \"Error\\\"\": true\n  }, \"function double(n) {\\n    console.log(n * 2);\\n}(80);\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"IIFE\\\" 1[1],3[2] subtitle=\\\"() creates expression\\\"\",\n    \"title\": \"\\\"IIFE\\\"\",\n    \"1[1],3[2]\": true,\n    \"subtitle\": \"\\\"()\",\n    \"creates\": true,\n    \"expression\\\"\": true\n  }, \"(function double(n) {\\n  console.log(n * 2);\\n})(80);\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"IIFE\\\"  1,2,3 subtitle=\\\"Anonymous function\\\"\",\n    \"title\": \"\\\"IIFE\\\"\",\n    \"\": true,\n    \"1,2,3\": true,\n    \"subtitle\": \"\\\"Anonymous\",\n    \"function\\\"\": true\n  }, \"(function (n) {\\n  console.log(n * 2);\\n})(80);\\n\"))), mdx(\"hr\", null), mdx(\"p\", null, \"Copy by value\"), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Copy by value\\\"\",\n    \"title\": \"\\\"Copy\",\n    \"by\": true,\n    \"value\\\"\": true\n  }, \"var q1 = [100, 200];\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Copy by value\\\"\",\n    \"title\": \"\\\"Copy\",\n    \"by\": true,\n    \"value\\\"\": true\n  }, \"var q1 = [100, 200];\\nvar q3 = [...q1];\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Copy by value\\\"\",\n    \"title\": \"\\\"Copy\",\n    \"by\": true,\n    \"value\\\"\": true\n  }, \"var q1 = [100, 200];\\nvar q3 = [...q1]; // [100, 200]\\nvar q4 = [...q1, 300, 400];\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Copy by value\\\"\",\n    \"title\": \"\\\"Copy\",\n    \"by\": true,\n    \"value\\\"\": true\n  }, \"var q1 = [100, 200];\\nvar q3 = [...q1]; // [100, 200]\\nvar q4 = [...q1, 300, 400]; // [100, 200, 300, 400]\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Contact two arrays\\\"\",\n    \"title\": \"\\\"Contact\",\n    \"two\": true,\n    \"arrays\\\"\": true\n  }, \"var q1 = [100, 200];\\nvar q5 = [700, 800];\\nvar q6 = [...q1, ...q5]; // [100, 200, 700, 800]\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Spread the values\\\"\",\n    \"title\": \"\\\"Spread\",\n    \"the\": true,\n    \"values\\\"\": true\n  }, \"var q1 = [100, 200];\\nvar q7 = [80, ...q1, 300, 400];\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Spread the values\\\"\",\n    \"title\": \"\\\"Spread\",\n    \"the\": true,\n    \"values\\\"\": true\n  }, \"var q1 = [100, 200];\\nvar q7 = [80, ...q1, 300, 400]; // [80, 100, 200, 300, 400]\\n\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"Different \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"for\"), \" loops\"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, github, shadesOfPurple],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"for loop\\\"\",\n    \"title\": \"\\\"for\",\n    \"loop\\\"\": true\n  }, \"for (var index = 0; index < marks.length; index++) {\\n  console.log(\\\"index is\\\", index);\\n  console.log(\\\"value is\\\", marks[index]);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"for...of\\\"\",\n    \"title\": \"\\\"for...of\\\"\"\n  }, \"for (var mark of marks) {\\n  console.log(\\\"mark is\\\", mark);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"for...in\\\"\",\n    \"title\": \"\\\"for...in\\\"\"\n  }, \"for (var index in marks) {\\n  console.log(\\\"index is\\\", index);\\n  console.log(\\\"mark is\\\", marks[index]);\\n}\\n\")))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    theme: shadesOfPurple,\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"var marks = [40, 9, 80, 0, 30];\\n\"))), mdx(CodeSurferColumns, {\n    themes: [vsDark, github, shadesOfPurple],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"for loop\\\"\",\n    \"title\": \"\\\"for\",\n    \"loop\\\"\": true\n  }, \"for (var index = 0; index < marks.length; index++) {\\n  console.log(\\\"index is\\\", index);\\n  console.log(\\\"value is\\\", marks[index]);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"for...of\\\"\",\n    \"title\": \"\\\"for...of\\\"\"\n  }, \"for (var mark of marks) {\\n  console.log(\\\"mark is\\\", mark);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"for...in\\\"\",\n    \"title\": \"\\\"for...in\\\"\"\n  }, \"for (var index in marks) {\\n  console.log(\\\"index is\\\", index);\\n  console.log(\\\"mark is\\\", marks[index]);\\n}\\n\")))), mdx(\"hr\", null), mdx(\"h2\", null, \"Object - Terms\"), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Object methods\\\"\",\n    \"title\": \"\\\"Object\",\n    \"methods\\\"\": true\n  }, \"let salaries = {\\n  John: 100,\\n  Pete: 300,\\n  Mary: 250,\\n};\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Object methods\\\" subtitle=\\\"pattern\\\"\",\n    \"title\": \"\\\"Object\",\n    \"methods\\\"\": true,\n    \"subtitle\": \"\\\"pattern\\\"\"\n  }, \"let salaries = {\\n  John: 100,\\n  Pete: 300,\\n  Mary: 250,\\n};\\n\\nlet objectName = {\\n  key1: value1,\\n  key2: value2,\\n};\\n\"))), mdx(\"hr\", null), mdx(\"h2\", null, mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"Object.keys()\"), \" & \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"Object.values()\")), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Object methods\\\"\",\n    \"title\": \"\\\"Object\",\n    \"methods\\\"\": true\n  }, \"let salaries = {\\n  John: 100,\\n  Pete: 300,\\n  Mary: 250,\\n};\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Object methods\\\"\",\n    \"title\": \"\\\"Object\",\n    \"methods\\\"\": true\n  }, \"let salaries = {\\n  John: 100,\\n  Pete: 300,\\n  Mary: 250,\\n};\\nObject.keys(salaries);\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Object methods\\\"\",\n    \"title\": \"\\\"Object\",\n    \"methods\\\"\": true\n  }, \"let salaries = {\\n  John: 100,\\n  Pete: 300,\\n  Mary: 250,\\n};\\nObject.keys(salaries); // [ \\\"John\\\", \\\"Pete\\\",  \\\"Mary\\\" ]\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Object methods\\\"\",\n    \"title\": \"\\\"Object\",\n    \"methods\\\"\": true\n  }, \"let salaries = {\\n  John: 100,\\n  Pete: 300,\\n  Mary: 250,\\n};\\nObject.keys(salaries); // [ \\\"John\\\", \\\"Pete\\\",  \\\"Mary\\\" ]\\nObject.values(salaries);\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Object methods\\\"\",\n    \"title\": \"\\\"Object\",\n    \"methods\\\"\": true\n  }, \"let salaries = {\\n  John: 100,\\n  Pete: 300,\\n  Mary: 250,\\n};\\nObject.keys(salaries); // [ \\\"John\\\", \\\"Pete\\\",  \\\"Mary\\\" ]\\nObject.values(salaries); // [ 100, 300, 250 ]\\n\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"Different \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"for\"), \" loops with object\"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, github, shadesOfPurple],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"for...of\\\"\",\n    \"title\": \"\\\"for...of\\\"\"\n  }, \"for (var key of Object.keys(salaries)) {\\n  console.log(key, \\\" salary is \\\", salaries[key]);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"for...in\\\"\",\n    \"title\": \"\\\"for...in\\\"\"\n  }, \"for (var key in salaries) {\\n  console.log(key, \\\" salary is \\\", salaries[key]);\\n}\\n\")))), mdx(\"hr\", null), mdx(\"h1\", null, \"That's all folks \\uD83D\\uDE4B\\uD83C\\uDFFD\\u200D\\u2642\\uFE0F\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"matchPath":"/intro-to-js/*","id":"fe525724-c99d-5bf4-ae06-77d8ea6eed86","slug":"/intro-to-js","title":"Intro to JS 👋"}},"staticQueryHashes":[]}